<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.params')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <validator name="form">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.roomName')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" maxlength="60" v-model="cfg.roomName" :disabled="cfg._id > 0" v-validate:room-name="{required: true, maxlength: 30, name: true}">
            <strong class="my-error text-danger" v-if="$form.roomName.required">{{$t('error.required')}}</strong>
            <strong class="my-error text-danger" v-if="$form.roomName.maxlength">{{$t('error.tooLong')}}</strong>
            <strong class="my-error text-danger" v-if="$form.roomName.name">{{$t('error.invalidName')}}</strong>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.topoIdOfMediaDev')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="cfg.topoIdOfMediaDev" :disabled="cfg._id > 0">
              <option v-for="option in topoDevsOptions" :value="option.value">{{option.text}}</option>
            </select>
          </div>
        </div>
        <div class="form-group" v-show="cfg._id > 0">
          <label class="col-sm-3 control-label">{{$t('list.scene')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" maxlength="60" v-model="cfg.scene" v-validate:scene="{required: true, maxlength: 30, name: true}">
            <strong class="my-error text-danger" v-if="$form.scene.required">{{$t('error.required')}}</strong>
            <strong class="my-error text-danger" v-if="$form.scene.maxlength">{{$t('error.tooLong')}}</strong>
            <strong class="my-error text-danger" v-if="$form.scene.name">{{$t('error.invalidName')}}</strong>
          </div>
        </div> 
        <div class="form-group" v-show="cfg._id > 0">
          <label class="col-sm-3 control-label">{{$t('layout')}}</label>
          <div class="col-sm-8">
            <select class="form-control" v-model="layout" @change.prevent="onLayoutChange">
              <option v-for="option in layoutOptions" :value="option._id">{{option.name}}</option>
            </select>
          </div>
        </div>
        <div class="form-group" v-show="cfg._id > 0">
          <div class="col-sm-offset-3 col-sm-8" id="rec-layout">
          </div>
        </div>                
      </form>
    </validator>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import locales from '../locales/recordRoom.js'
import * as actions from 'share/server/vuex/actions/media.js'
import {mediaApi} from 'share/server/api.js'
import {printObj, copyObj} from 'libs/utils.js'
import {LcdPreview} from 'libs/canvas.js'

export default {
  locales,
  vuex: {
    getters: {
      topoDevs: (state) => state.media.topoDevs.list,
      layouts: (state) => state.vidlayout.list,
      streams: (state) => state.streamsrc.list
    },
    actions
  },
  computed: {
    topoDevsOptions () {
      let onlineStr = this.$t('brackets', {content: this.$t('common.online')})
      var options = _.map(this.topoDevs, (item) => {
        return {
          text: item.devName + (1 === item.online ? onlineStr : ''),
          value: item.topoId
        }
      })

      options.splice(0, 0, {
        text: this.$t('common.autosel'),
        value: -1
      })

      return options
    },
    layoutOptions () {
      return _.filter(this.layouts, {multiScreenX: 1, multiScreenY: 1})
    }
  },
  data () {
    return {
      show: false,
      layout: -1,
      cfg: {
        _id: -1,
        roomName: 'default',
        scene: '',
        windowList: '',
        status: '',
        topoIdOfMediaDev: -1     
      }
    }
  },
  methods: {
    onLayoutChange () {
      let layout = _.find(this.layouts, {_id: this.layout})
      this.cfg.windowList = layout.windowList
      this.onDrawVidLayout()
    },
    onDrawVidLayout () {
      if (this.cfg.windowList === '') {
        return
      }

      var windows = JSON.parse(this.cfg.windowList)
      _.forEach(windows, function(item) {
        let stream = _.find(this.streams, {topoId: item.srcTopoId, portName: item.srcPortName})
        if (stream) {
          item.srcName = stream.name
        }
      }.bind(this))

      let realWidth = 12 * 16
      let realHeight = 12 * 9
      let scale = 500 / realWidth
      var previewCfg = {
        width: 500,
        height: realHeight * scale,
        scale: scale
      }
      this.preview.init('rec-layout', previewCfg)     
      this.preview.updateBg({
        color: {
          hex: '#666'
        }
      }) 
      this.preview.updateWindows(windows, {
        xScale: scale * 16,
        yScale: scale * 9
      })
    },
    onQuit () {
      this.show = false
    },
    onSaveAdd () {
      if (this.$form.roomName.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      mediaApi.sendCmd('addRoom', {
        roomName: this.cfg.roomName,
        topoIdOfMediaDev: this.cfg.topoIdOfMediaDev
      }).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.doLoadRecordRooms()
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))

      this.show = false
    },
    onSaveEdit () {
      if (this.$form.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      mediaApi.sendCmd('setRoom', {
        _id: this.cfg._id,
        scene: this.cfg.scene,
        windowList: this.cfg.windowList
      }).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.doLoadRecordRooms()
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))

      this.show = false
    },
    onSaveChanges () {
      if (this.cfg._id > 0) {
        this.onSaveEdit()
      } else {
        this.onSaveAdd()
      }
    },
    onShow (val) {
      copyObj(this.cfg, val)
      this.layout = -1
      this.onDrawVidLayout()
      this.show = true
    }
  },
  ready () {
    this.preview = new LcdPreview()
    ebus.on('show-record-room-detail', this.onShow)
  }
}
</script>

<style>
</style>